import { css } from "styled-components";

const ordered = ["decimal", "lower-alpha", "lower-roman"];
const unordered = [`"\\25CF"`, `"\\25CB"`, `"\\25A0"`];

function nthOfType(array, n) {
  return array[n % array.length];
}

function includeIndentation(indentationLevel) {
  return css`
    padding-left: ${(p) =>
      `calc(${p.theme.spacing.unit * 3 * indentationLevel}px + ${
        p.theme.spacing.gutter
      }px)`};
  `;
}

function includeListStyle(indentationLevel) {
  return css`
    ${`ol.list-reset-${indentationLevel}`} {
      counter-reset: ${`ol-${indentationLevel} var(--start-at, 1)`};
    }
    ${`ul.indented.indentation-${indentationLevel} > li`}, ${`ol.indented.indentation-${indentationLevel} > li`} {
      padding-left: ${(p) =>
        `calc(${p.theme.spacing.unit * 3 * indentationLevel}px + 1.5em)`};
    }
    ${`ol.indentation-${indentationLevel}`} > li:before {
      content: ${`counter(ol-${indentationLevel}, ${nthOfType(
        ordered,
        indentationLevel
      )}) ". "`};
    }
    ${`ol.indentation-${indentationLevel}`} > li:after {
      counter-increment: ${`ol-${indentationLevel}`};
      content: "";
    }
    ${`ul.indentation-${indentationLevel}`}:not(.checkList) > li:before {
      content: ${nthOfType(unordered, indentationLevel)};
    }
  `;
}

export default css`
  ol,
  ul {
    margin-top: 0;
    margin-bottom: 0;
    list-style-type: none;
    line-height: initial;
    padding-left: 45px;
  }

  ul > li,
  ol > li {
    position: relative;
    padding-left: 2em;
  }

  ol > li {
    text-indent: -2em;
  }

  ul > li {
    text-indent: -2.125em;
  }

  ul.checkList > li {
    text-indent: -2em;
  }

  ul > li > span,
  ol > li > span {
    line-height: ${(p) => p.lineHeight || p.theme.typography.lineHeight};
  }

  ul > li:before,
  ol > li:before {
    font-size: 1em;
    user-select: text;
    text-align: right;
    display: inline-block;
    width: 1em;
    cursor: text;
  }

  ol.list-reset:not(.indented) {
    counter-reset: ${`ol var(--start-at, 1)`};
  }

  ul > li:after {
    counter-increment: ul;
    content: '';
  }

  ol > li:after {
    counter-increment: ol;
    content: '';
  }

  ol > li:before {
    margin-right: 1em;
    content: counter(ol, ${nthOfType(ordered, 0)}) ". ";
  }

  ul > li:before {
    content: ${nthOfType(unordered, 0)};
    margin-right: 1.475em;
    font-size: 0.875em;
  }

  ul.checkList {
    line-height: initial;
  }

  ul.checkList > li:before {
    cursor: pointer;
    font-size: 1em;
    display: inline-block;
    margin-right: 1em;
    width: 1em;
    background-repeat: no-repeat;
    content: ' ';
    text-align: right;
    background-size: 1em 1em;
    background-position: right;
    background-image: url();
  }

  .checkList.checked {
    text-decoration: line-through;
    color: ${(p) => p.theme.colors.shadows[36]}
  }

  .checkList.checked > li:before {
    background-image: url();
  }

  .indentation-1:not(ul):not(ol) {
    ${includeIndentation(1)};
  }

  .indentation-2:not(ul):not(ol) {
    ${includeIndentation(2)};
  }

  .indentation-3:not(ul):not(ol) {
    ${includeIndentation(3)};
  }

  .indentation-4:not(ul):not(ol) {
    ${includeIndentation(4)};
  }

  .indentation-5:not(ul):not(ol) {
    ${includeIndentation(5)};
  }

  .indentation-6:not(ul):not(ol) {
    ${includeIndentation(6)};
  }

  .indentation-7:not(ul):not(ol) {
    ${includeIndentation(7)};
  }

  .indentation-8:not(ul):not(ol) {
    ${includeIndentation(8)};
  }

  .indentation-9:not(ul):not(ol) {
    ${includeIndentation(9)};
  }

  ${includeListStyle(1)}
  ${includeListStyle(2)}
  ${includeListStyle(3)}
  ${includeListStyle(4)}
  ${includeListStyle(5)}
  ${includeListStyle(6)}
  ${includeListStyle(7)}
  ${includeListStyle(8)}
  ${includeListStyle(9)}
    `;
